<template>
  <div class="awardList">
      <div class="datum">
        <div class="inner">
          <div class="top">
             <div class="header">
               <div><img src="~src/images/aimer.jpg" alt=""></div>
             </div>
              <div class="detail">
                  <div><span>麦琪</span>业务经理</div>
                  <div>13956448576</div>
                  <div>广东省广州市番禺区大石会江丰晟工业园F栋4楼</div>
              </div>
          </div>
          <div class="bottom">深圳市艾科讯电脑技术有限公司</div>
        </div>
      </div>
      <div class="manage">
          <div class="audit">
            <div class="word">
              通过审核
            </div>
            <div class="swith ispos_rep">
            <mt-switch v-model="value"></mt-switch>
            <div class="ispostion" @click="isPass()"></div>
            </div>
          </div>
          <div class="focut">
               <div class="word">
              关注对方
            </div>
            <div class="swith ispos_rep">
                 <mt-switch v-model="watchar_value"></mt-switch>
                 <div class="ispostion" @click="isAttention()"></div>
            </div>
          </div>
      </div>
      <div v-show="ListActivityQuestions" class="addition">
        <h3>报名附加填写项目</h3>
        <div v-for="attr in ListActivityQuestions" class="problem">
          <p>{{attr.Question}}</p>
          <p>{{attr.Item}}</p>
        </div>
      </div>


          <div class="addition">
        <h3>调研信息</h3>
        <div class="problem">
          <p>1､您的业务性质</p>
          <p>经销商</p>
        </div>
          <div class="problem">
          <p>2､您感兴趣的展品是</p>
          <p>智能家居</p>
        </div>
          </div>


          
          <div class="addition">
        <h3>调研信息</h3>
        <div class="problem">
          <p>1､您的业务性质</p>
          <p>经销商</p>
        </div>
          <div class="problem">
          <p>2､您感兴趣的展品是</p>
          <p>智能家居</p>
        </div>
          </div>
           <footer>
            发送信息

          </footer>
      </div>
  </div>

</template>
<script>
  import { ApproveApplication_api } from 'src/servise/getData';  //审核通过与审核不允许通过
  import { ExhibitorsFocusAudience_api } from 'src/servise/getData';  // 关注
  import { ExhibitorsUnfollowAudience_api } from 'src/servise/getData'; // 取消关注
  import { GetApplyInfo_api } from 'src/servise/getData'; // 展示操作的用户的详情信息

  import { MessageBox } from 'mint-ui';
  import Qs from 'Qs';
  export default {
    created () {
      //获取当前用户详情
      this.init();
    },
    data() {
      return {
        value: false,
        watchar_value: false,
        OpenId: '',
        ActivityID: -1,
        ListActivityQuestions: []
      }
    },
    methods: {
      init(){
        //初始化数据（点击用户详情，根据活动ID "ActivityID" 与 用户ID(OpenId) 获取用户信息和 活动信息）
        let info = JSON.parse(sessionStorage.userApply_userDetail);
        console.log(info)
        this.ActivityID = info.ActivityID;
        this.OpenId = info.openid;
        //console.log(this.openid, this.ActivityID);

        this.$http.post(GetApplyInfo_api,Qs.stringify({'ActivityID': this.ActivityID, 'OpenId': this.OpenId})).then((res) => {
          this.data = res.data;
          this.value = !!this.data.Result.AuditStauts;
          this.watchar_value = !!this.data.Result.IsFocused;
          this.ListActivityQuestions = res.data.Result.ListActivityQuestions;
          //console.log(this.watchar_value);
          //console.log(res.data.Result.ListActivityQuestions);
        })
      },
      isPass() {
        // 用户详情 （审核通过，不允许通过）
        let That = this;
        let status = That.value == false ? 1 : 0;
        let OpenId = "test14";
        let ActivityID = 6
        That.$http.post(ApproveApplication_api,
          Qs.stringify({ "ActivityID": ActivityID, "OpenId": this.OpenId, "status": status })
        ).then(function(res) {
          console.log(res)
          if (res.data.ErrorCode != 0) {
            return MessageBox.alert(res.data["ErrorMessage"]);
          }
          That.value = !That.value;
        })

        //console.log(Qs.stringify({ "ActivityID": 45, "opendid": opendid, "status": 1 }));
      },
      isAttention() {
        console.log(this.watchar_value);
        // 用户详情 （关注 与 取消关注）
        let url = '';
        let That = this;
        if(That.watchar_value == false){
           // 关注
           console.log("关注");
           url = ExhibitorsFocusAudience_api;
        }else if(That.watchar_value == true){
          // 取消关注
          console.log("取消关注");
          url = ExhibitorsUnfollowAudience_api;
        }
        // // console.log(url +"  " );
        // // console.log("AcitvityID="+this.ActivityID+" OpenId="+this.OpenId);
        That.$http.post(url,Qs.stringify({"ActivityID":this.ActivityID,"OpenId":this.OpenId})).then(function(res) {
        //   console.log(res)
           if (res.data.ErrorCode != 0) {
             return MessageBox.alert(res.data["ErrorMessage"]);
            }
            That.watchar_value = That.watchar_value === true? false: true;
           console.log(That.watchar_value);
        })
      }
    }
  };
</script>
<style scoped lang="stylus">
  .ispos_rep
    position relative
    .ispostion
      width 89%
      z-index 100
      height 97%
      position absolute
  .mint-switch .mint-switch-core::before
    height 500px

  .awardList
    padding-bottom 50px

  .datum
    background-color #fff
    padding 17px 16px
    .inner
      background-color #E05362
      height 155px
      border-radius 6px
      padding 12px 12px
      position relative
      .top
        display flex
        .header
          width 80px
        
          div 
            width 80px
            height 80px
            img
              width 100%
              height 100%
    .detail
      flex 1
      font-size 14px
      color #fff
      padding-left 14px
      div:first-child
          margin-top 0
      div
        color #fff
        margin-top 3px
        span
          font-size 23px
          color #fff
          margin-right 6px

  .bottom 
    font-size 13px
    text-align center
    color #FFCC91
    position absolute
    bottom 8px
    width 100%
  .manage
    background-color #fff
    margin-top 10px
    div
      border-bottom 1px solid #F0F0F2
      height 45px
      display flex
      font-size 15px
      line-height 45px
      padding 0 12px
  .addition
      margin-top 10px
      background-color #fff
      padding 12px 12px
      h3
        font-size 17px
        color #00C9C2
      .problem
        font-size 15px
        p
          margin-top 13px
        p:last-child
          color #999999
  footer
    height 49px
    background-color #2A96F5
    text-align center
    color #ffffff
    font-size 18px
    line-height 49px
    position fixed
    bottom 0
    width 100%
  .focut
  .audit
    display flex
    .word
      flex 1
    .swith
      width 55px

    

</style>
<style lang="stylus" >
.mint-switch-core
      width 35px
      height 21px
    .mint-switch-core::before
      width 33px
      height 19px
    .mint-switch-core::after
      width 19px
      height 19px
    .mint-switch-input:checked + .mint-switch-core
      border-color: #2A96F5;
      background-color: #2A96F5;
  .mint-switch-input:checked + .mint-switch-core::after {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}
  
</style>
